<template>
    <div class="TalentCommuni">
        <div style="display:flex;justify-content:space-between;padding-right:15px;">
            <div class="title">沟通管理-人才沟通</div>
            <div class="search-g" @keyup.enter.exact="clickSearch">
                <el-input v-for="(t,i) in searchType" :key="i" v-model="searchString[i]" maxlength="32"
                          :placeholder="t"></el-input>
                <el-button @click="clickSearch">查询</el-button>
            </div>
        </div>
        <div class="TalentResume">
            <div class="Ltop">
                <el-scrollbar style="width: 1530px;height: 80px;margin-left: 10px;margin-right: 10px">
                    <div style="height:80px;display: flex;flex-direction: row;align-items: center">
                        <div v-for="(t,i) in companyCache" :key="i" class="Ltop_box"
                             :class="{'Ltop_box_active':activeCompany===i,'Ltop_box_normal':activeCompany!==i}"
                             @click="clickCompany(i)"
                        >
                            <p style="width: fit-content;padding-left:28px"
                               :class="{'Ltop_box_active_text':activeCompany===i,'Ltop_box_normal_text':activeCompany!==i}">
                                {{t.name}}
                            </p>
                            <div v-if="t.unreadQ" class="red_dot red_dot_com"></div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <div class="Lcontent">
                <el-scrollbar style="width:15%;height:100%;border:#f2f2f2 solid 1px;">
                    <div v-for="(t,i) in jobCache" :key="i" class="Lleft"
                         :class="{'Lleft_active':activeJob===i,'Lleft_normal':activeJob!==i}"
                         @click="clickJob(i)"
                    >
                        <p :class="{'Lleft_text_active':activeJob===i,'Lleft_text_normal':activeJob!==i}">{{t.name}}</p>
                        <div v-if="t.unreadQ" class="red_dot red_dot_job"></div>
                    </div>
                </el-scrollbar>
                <el-scrollbar style="width:20%;height:100%;border:#f2f2f2 solid 1px;">
                    <div v-for="(t,i) in talentCache" :key="i" class="LMain_box"
                         :class="{'LMain_box_active':activeTalent===i,'LMain_box_normal':activeTalent!==i}"
                         @click="clickTalent(i)"
                    >
                        <div class="userImage"><img :src="t.image" alt=""></div>
                        <div class="middle-group">
                            <div class="top-group">
                                <div class="userName">{{t.name}}</div>
                                <div class="time">{{t.lastTime}}</div>
                            </div>
                            <div class="bottom-group">
                                <el-popover placement="top-start"
                                            :width="$pop.licenseWidth"
                                            trigger="hover"
                                            :disabled="$pop.getLicensesString(t.license).all.length===0">
                                    <p v-for="(lt,li) in $pop.getLicensesString(t.license).all" :key="li">
                                        {{lt}}</p>
                                    <div class="license" slot="reference">
                                        {{$pop.getLicensesString(t.license).first}}
                                    </div>
                                </el-popover>
                                <div v-if="t.unreadQ" class="red_dot red_dot_talent"></div>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
                <div v-if="activeTalent>-1" class="LRight">
                    <!--沟通中，聊天窗口-->
                    <el-tabs type="border-card" class="talent-comm-tabs">
                        <el-tab-pane label="聊天窗口" class="tab-pane">
                            <!--聊天窗口-->
                            <ChatWindow
                                    :comm-id="commInfo.commId"
                                    :to-id="commInfo.toId"
                                    :job-name="commInfo.jobName"
                                    :can-send-q="commInfo.canSendQ"
                            />
                        </el-tab-pane>
                        <el-tab-pane label="在线简历" class="tab-pane">
                            <!--在线简历-->
                            <el-scrollbar style="width:calc(100% - 2px);height: calc(100% - 5px);">
                                <OnlineResume :talent-id="commInfo.toId"/>
                            </el-scrollbar>
                        </el-tab-pane>
                        <el-tab-pane label="推荐报告" class="tab-pane">
                            <!--推荐报告-->
                            <el-scrollbar style="width:calc(100% - 2px);height: calc(100% - 5px);">
                                <resume-dialog
                                        :company-id="commInfo.companyId"
                                        :job-id="commInfo.jobId"
                                        :talent-id="commInfo.toId"/>
                            </el-scrollbar>
                        </el-tab-pane>
                        <el-tab-pane label="附件简历" class="tab-pane">
                            <attachment style="width:100%;height: 100%;"
                                        :talent-id="commInfo.toId"></attachment>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <el-dialog title="提示" :visible.sync="showChangeAdvisorQ">
            <ChangeAdvisorDialog :type="0" @click-which="clickDialog"></ChangeAdvisorDialog>
        </el-dialog>
    </div>
</template>

<script>
  import RecordList from '../comm/RecordList'
  import ChatWindow from '../communication/chatWindow/chatWindow'
  import OnlineResume from '../communication/OnlineResume/OnlineResume'
  import ResumeDialog from '../communication/report/resume-dilog'
  import * as _ from 'underscore'
  import _subject from '../../assets/utils/subject'
  import comm from '../../assets/utils/comm'
  import Attachment from '../communication/attachment/attachment'
  import ChangeAdvisorDialog from '../comm/ChangeAdvisorDialog'

  export default {
    name: 'TalentCommuni',
    components: { Attachment, ChatWindow, OnlineResume, RecordList, ResumeDialog, ChangeAdvisorDialog },
    data() {
      return {
        showChangeAdvisorQ: false,
        searchType: ['企业名称', '职位名称', '人才姓名'],
        searchString: ['', '', ''],
        userImg: require('@/assets/logo.png'),
        btnlist: [
          { name: '投递简历', isActive: false },
          { name: '附件简历', isActive: false },
          { name: '推荐报告', isActive: false }
        ],
        inputString: '',
        serverData: [],
        tuple: [],
        companies: [
          { icon: require('@/assets/imgs/logo.png'), name: '行星轮（武汉）' }
        ],
        activeCompany: -1,
        jobs: [
          { name: '一级结构' }
        ],
        activeJob: -1,
        talents: [
          { image: null, name: '名称', lastTime: '16:00', license: '执业类型' }
        ],
        activeTalent: -1,
        wsSub: null
      }
    },
    computed: {
      companyCache() {
        this.companies = _.map(this.serverData, t => {
          return {
            id: t.companyId,
            name: _subject.truncate(t.name ? t.name : '---', 7),
            unreadQ: this.companyUnreadQ(t.companyId),
            canSendQ: t.showList ? Number(t.showList) !== 1 : true
          }
        })
        return this.companies
      },
      jobCache() {
        if (this.activeCompany > -1) {
          this.jobs = _.map(this.serverData[this.activeCompany].childList, t => {
            return {
              id: t.jobId,
              pid: t.companyId,
              name: _subject.truncate(t.name ? t.name : '---', 7),
              unreadQ: this.jobUnreadQ(t.companyId, t.jobId)
            }
          })
        } else {
          this.jobs = []
        }
        return this.jobs
      },
      talentCache() {
        if (this.activeCompany > -1 && this.activeJob > -1) {
          this.talents = _.map(this.serverData[this.activeCompany].childList[this.activeJob].childList, t => {
            const company = this.serverData[this.activeCompany]
            const job = company.childList[this.activeJob]
            return {
              id: t.talentId,
              pid: t.jobId,
              companyId: company.companyId,
              jobId: job.jobId,
              commId: t.comId,
              toId: t.talentId,
              image: t.head,
              name: _subject.truncate(t.name ? t.name : '---', 7),
              lastTime: new Date(Date.parse(t.lastComtime)).format('MM月dd日'),
              license: t.lincenceList,
              unreadQ: this.talentUnreadQ(t.comId),
              jobName: job.name,
              talentSex: t.sex,
              canSendQ: this.talentCanSendQ(t.comId)
            }
          })
        } else {
          this.talents = []
        }
        return this.talents
      },
      commInfo() {
        if (this.activeTalent > -1) {
          console.log('comm info change')
          const active = this.talents[this.activeTalent]
          comm.toIcon = active.image
          return {
            commId: active.commId,
            toId: active.toId,
            jobName: active.jobName,
            companyId: active.companyId,
            jobId: active.jobId,
            canSendQ: active.canSendQ
          }
        } else {
          return {
            commId: 0,
            toId: 0,
            jobName: '',
            companyId: 0,
            jobId: 0,
            canSendQ: true
          }
        }
      }
    },
    methods: {
      clickDialog(type, which) {
        this.showChangeAdvisorQ = false
      },
      loadCommList() {
        this.activeCompany = -1
        this.activeJob = -1
        this.activeTalent = -1
        this.lAxios({
          method: 'post', //方法
          url: '/platform/selectComListByPlatfromId.do',
          params: {
            state: 2,
            companyName: this.searchString[0].trim(),
            jobName: this.searchString[1].trim(),
            talentName: this.searchString[2].trim()
          }
        }).then(res => {
          res = res.data
          if (res && res.status === 0) {
            console.log('talent communication', res)
            //清空沟通列表
            this.companies.splice(0, this.companies.length)
            this.jobs.splice(0, this.jobs.length)
            this.talents.splice(0, this.talents.length)
            //保存服务器数据
            this.serverData = res.data
            //创建沟通索引
            this.tuple.splice(0, this.tuple.length)
            _.each(this.serverData, c => {
              const cId = c.companyId
              _.each(c.childList, j => {
                const jId = j.jobId
                _.each(j.childList, t => {
                  const tId = t.talentId
                  const commId = t.comId
                  this.tuple.push(
                    [
                      cId,
                      jId,
                      tId,
                      commId,
                      t.unreadType === 'platform' ? t.unread > 0 : false,
                      c.showList !== 1
                    ]
                  )
                })
              })
            })
            console.log('tuple', this.tuple)
            //如果是跳转，定位到相应的聊天窗口
            const query = this.$route.query
            if (query.company && query.job && query.talent) {
              for (let ci = 0; ci < this.serverData.length; ci++) {
                const c = this.serverData[ci]
                if (Number(c.companyId) === Number(query.company)) {
                  this.activeCompany = ci
                  for (let ji = 0; ji < c.childList.length; ji++) {
                    const j = c.childList[ji]
                    if (Number(j.jobId) === Number(query.job)) {
                      this.activeJob = ji
                      for (let ti = 0; ti < j.childList.length; ti++) {
                        const t = j.childList[ti]
                        if (Number(t.talentId) === Number(query.talent)) {
                          this.activeTalent = ti
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        })
      },
      clickSearch() {
        console.log('search string', this.searchString)
        this.loadCommList()
      },
      companyUnreadQ(companyId) {
        return _.some(this.tuple, t => {
          return t[0] === companyId && t[4]
        })
      },
      jobUnreadQ(companyId, jobId) {
        return _.some(this.tuple, t => {
          return t[0] === companyId && t[1] === jobId && t[4]
        })
      },
      talentUnreadQ(commId) {
        return _.some(this.tuple, t => {
          return t[3] === commId && t[4]
        })
      },
      talentCanSendQ(commId) {
        return _.some(this.tuple, t => {
          return t[3] === commId && t[5]
        })
      },
      onNewMessage(commId, unread) {
        console.log('onNewMessage', commId, unread)
        if (unread) {
          const activeComm = _.find(this.tuple, t => {
            return t[3] === commId
          })
          console.log('activeComm', activeComm)
          if (activeComm) {
            activeComm[4] = true
            for (let c of this.companies) {
              if (c.id === activeComm[0]) {
                c.unreadQ = true
              }
            }
            for (let j of this.jobs) {
              if (j.id === activeComm[1]) {
                j.unreadQ = true
              }
            }
            for (let t of this.talents) {
              if (t.id === activeComm[2]) {
                t.unreadQ = true
              }
            }
          }
          // for (let i = 0; i < this.companyCache.length; i++) {
          //   let company = this.companyCache[i]
          //   if (company.id === activeComm[0]) {
          //     this.activeCompany = i
          //     company.unreadQ = true
          //     for (let j = 0; j < this.jobCache.length; j++) {
          //       let job = this.jobCache[j]
          //       if (job.id === activeComm[1]) {
          //         this.activeJob = j
          //         job.unreadQ = true
          //         for (let k = 0; k < this.talentCache.length; k++) {
          //           let talent = this.talentCache[k]
          //           if (talent.id === activeComm[2]) {
          //             this.activeTalent = k
          //             talent.unreadQ = true
          //             activeComm[4] = true
          //           }
          //         }
          //       }
          //     }
          //   }
          // }
        }
      },
      clickCompany(i) {
        if (this.activeCompany !== i) {
          this.activeJob = -1
          this.activeTalent = -1
        }
        this.activeCompany = i
        //是否显示更改顾问的提示
        if (!this.companies[this.activeCompany].canSendQ) {
          this.showChangeAdvisorQ = true
        }
      }
      ,
      clickJob(i) {
        if (this.activeJob !== i) {
          this.activeTalent = -1
        }
        this.activeJob = i
      }
      ,
      clickTalent(i) {
        this.activeTalent = i
        this.talents[i].unreadQ = false
        //扁平的沟通列表状态置为false
        _.each(this.tuple, t => {
          if (t[3] === this.talents[i].commId) {
            t[4] = false
          }
        })
        if (_.every(this.talents, t => {
          return !t.unreadQ
        })) {
          this.jobs[this.activeJob].unreadQ = false
          if (_.every(this.jobs, t => {
            return !t.unreadQ
          })) {
            this.companies[this.activeCompany].unreadQ = false
          }
        }
      }
      ,
      doClick(obj) {
        console.log(obj)
        this.btnlist.forEach(item => {
          item.isActive = false
        })
        this.btnlist[obj].isActive = true
      }
      ,
      doPersonnel() {
        // this.$router.push('/Personnel')
      }
      ,
      doSend() {
        console.log('发送')
      }
    },
    created() {
      this.loadCommList()
      //订阅消息
      let self = this
      console.log('subscribe talent ws')
      this.wsSub = _subject.ws.subscribe({
        next(t) {
          console.log('on new talent message', t)
          if (t.status === 200) {
            let m = t.data.type
            if (m === 'SINGLE_SENDING') {
              let commId = t.data.comid
              let mainId = t.data.mainUserId
              let toId = t.data.toUserId//对方发送的消息
              let mainCom=t.data.mainCom;
              //通知收到父组件消息
              self.onNewMessage(Number(commId), Number(t.data.unread))
            }
          }
        }
      })
    },
    destroyed() {
      if (this.wsSub) {
        this.wsSub.unsubscribe()
      }
    }
  }
</script>

<style lang="scss" scoped>

    .red_dot {
        width: 12px;
        height: 12px;
        background: rgba(255, 83, 84, 1);
        border: 1px solid rgba(255, 161, 161, 1);
        border-radius: 50%;
    }

    .red_dot_com {
        position: absolute;
        right: 0;
        bottom: 0;
        margin-bottom: 5px;
        margin-right: 15px;
    }

    .comm_normal {
        background: rgba(51, 119, 255, 0.0980392156862745)
    }

    .comm_active {
        background: white
    }

    .TalentCommuni {
        box-sizing: border-box;
        width: 100%;
        height: calc(100vh - 120px);
        font-size: 12px;
        padding-left: 10px;
        padding-right: 10px;
        background: #F7F9FC;
        /*border: 1px solid green;*/
        .search-g {

            display: flex;
            align-items: center;

            .el-input {
                &:nth-child(2) {
                    margin-left: 15px;
                }

                &:nth-child(3) {
                    margin-left: 15px;
                }
            }

            .el-button {
                margin-left: 15px;
                color: white;
                background: #199ed8;
            }
        }
    }

    .title {
        height: 40px;
        line-height: 40px;
    }

    .TalentResume {
        width: 100%;
        height: calc(100% - 40px);
        background-color: white;
        /*border: 1px red solid;*/
    }

    .Ltop {
        /*margin-left: 20px;*/
        background: rgba(245, 246, 249, 1);
        display: flex;
        flex-direction: row;
    }

    .Ltop_box_active_text {
        font-size: 20px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .Ltop_box_normal_text {
        font-size: 18px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }


    .Ltop_box_active {
        height: 60px;
        background: rgba(255, 255, 255, 1);
        border-radius: 28px;
    }

    .Ltop_box_normal {
        height: 56px;
        background: rgba(255, 255, 255, 1);
        opacity: 0.7;
        border-radius: 28px;
    }

    .Ltop_box {
        width: 260px;
        line-height: 37px;
        /*border: 1px solid red;*/
        /*background-color: white;*/
        font-size: 14px;
        margin-right: 10px;
        cursor: default;
        display: flex;
        flex-direction: row;
        align-items: center;

        position: relative;
    }

    .Ltop_box:hover {
        background: rgba(247, 249, 252, .8);
    }

    .Ltop_box > div:nth-child(1) {
        width: 28px;
        height: 32px;
        margin-top: 6px;
        margin-left: 8px;

        img {
            width: 100%;
        }

    }

    .Ltop_box > div:nth-child(2) {
        /*overflow: hidden;*/
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/
    }


    .active {
        width: 82px;
        height: 34px;
        background-color: #3377ff;
        color: white;
        border-radius: 4px;
        margin-top: -1px;
    }

    .Lcontent {
        width: 100%;
        height: calc(100% - 80px);
        display: flex;
        flex-direction: row;
        /*border: 1px solid green;*/
    }

    .age {
        display: flex;
        flex-direction: row;
        position: relative;
    }

    .Lleft {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        padding-left: 15px;

        position: relative;

        .red_dot_job {
            position: absolute;
            right: 5px;
        }
    }

    .Lleft_active {
        background: rgba(238, 240, 253, 1);
        border-left: 3px solid #3377FF;
    }

    .Lleft_normal {
        background: rgba(255, 255, 255, 1);
        border-left: 3px solid transparent;
    }

    .Lleft_text_active {
        font-size: 20px;
        font-weight: bold;
        color: rgba(51, 119, 255, 1);
    }

    .Lleft_text_normal {
        font-size: 18px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
    }

    .Lleft > div {
        /*width: 100%;*/
        /*height: 100%;*/
        line-height: 43px;
        padding: 0;
        text-align: center;
    }

    .Lleft:hover {
        background: rgba(247, 249, 252, .8);
    }

    .LMain {

    }

    .LMain_box {
        width: 100%;
        height: 100px;
        box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.05);
        cursor: default;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        font-size: 14px;

        .userImage {
            flex-basis: 50px;
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            margin-left: 15px;

            img {
                border-radius: 50%;
                width: 100%;
                height: 100%;
            }
        }

        .middle-group {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
            flex-grow: 1;
            box-sizing: border-box;
            padding-top: 15px;
            padding-bottom: 15px;
            margin-left: 15px;

            .top-group {

                width: 100%;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;

                .userName {
                    font-size: 20px;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }

                .time {
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(204, 204, 204, 1);
                    margin-right: 15px;
                }
            }

            .bottom-group {

                width: 100%;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                position: relative;

                .red_dot_talent {
                    flex-shrink: 0;
                    position: absolute;
                    right: 15px;
                    bottom: 0;
                }

                .license {
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(153, 153, 153, 1);
                }
            }
        }
    }

    .LMain_box_active {
        background: rgba(238, 239, 244, 1);
    }

    .LMain_box_normal {
        background: rgba(255, 255, 255, 1);
    }

    .LMain_box:hover {
        background: rgba(247, 249, 252, .8);
    }

    .LRight {
        width: 65%;
        height: 100%;
        /*border: 1px solid red;*/
    }

    .lsp > span:nth-child(1) {
        margin-left: 10px;
    }

    .lsp > span:nth-child(2) {
        margin-left: 30px;
        font-size: 12px;
    }

    .LRightT {
        height: fit-content;
        background-color: white;
    }

    .LRightB {
        display: flex;
        flex-direction: column;
        height: 160px;
        background-color: white;
        margin-top: 8px;
        position: relative;
        border: 1px solid #f2f2f2;
    }

    .LRightB > div {
        width: 88px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        /*border: 1px solid #797979;*/
        background-color: white;
        border-radius: 25px;
        position: absolute;
        right: 20px;
        bottom: 8px;
    }

    .lbtn {
        display: flex;
        flex-direction: row;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .lbtn > div {
        width: 80px;
        height: 32px;
        font-size: 12px;
        line-height: 32px;
        text-align: center;
        border: 1px solid #999;
        border-radius: 4px;
        background-color: white;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 15px;
        margin-bottom: 10px;
        cursor: default;
    }

    .lbtn > div:nth-child(1) {
        margin-left: 30px;
    }

    .LRightM {
        width: 96%;
        height: 86px;
        margin-left: 3%;
        background-color: #eff3fc;
        display: flex;
        flex-direction: row;
    }

    .LRightM > div:nth-child(1) {
        width: 59px;
        height: 56px;
        margin-left: 10px;
        padding-top: 12px;

        img {
            width: 100%;
        }
    }

    .LRightM_box > div {
        display: flex;
        flex-direction: row;

        div {
            margin-right: 30px;
            margin-top: 5px;
            margin-left: 15px;
        }
    }

    .LRightM_box > div:nth-child(1) {
        margin-top: 15px;
    }

    .LRightB > button {
        width: 103px;
        height: 24px;
        border: 1px solid #797979;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#dedede));
        position: absolute;
        right: 20px;
        bottom: 8px;
    }

    .jobName {

    }

    .practice {
        grid-row: 2/3;
        grid-column: 2/3;
        align-self: start;
        justify-self: start;
    }

    .Sta {
        position: absolute;
        right: 50px;
        top: 30px;
    }

    .fontColor {
        color: red;
    }

    .LRm {
        width: 100%;
        background-color: #eff3fc;
        /*border: 1px solid blue;*/
    }

    .secDiv {
        margin-top: 10px;
    }

    .Qs {
        position: absolute;
        right: 50px;
    }

    .Name {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    .talent-comm-tabs {
        width: 100%;
        height: 100%;
    }

    .tab-pane {
        width: 100%;
        height: 100%;
    }
</style>
